<template>
	<view class="swiper-3d" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}">
		<swiper :style="{width: '100%',height:canvasHeight+'px'}" :circular="true">
			<swiper-item v-for="(item,index) in  imgbox" :key="index">
				<view class="swiper-item" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}">
					<canvas :ref="`firstCanvas${index}`" :style="{width: canvasWidth+'px',height:canvasHeight+'px'}"
						:canvas-id="`firstCanvas${index}`" @longpress="saveImgToLocal(index,0)"></canvas>
				</view>
			</swiper-item>
		</swiper>
		<!-- 生成二维码 -->
		<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" @getQrPath="getQrPath"
			:colorLight="colorLight"> </yz-qr>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>
<script>
	import yzQr from "@/components/yz-qr/yz-qr.vue"
	export default {
		components: {
			yzQr
		},
		data() {
			return {
				imgbox: [],
				imgSrc: '',
				canvasQrPath: "",
				text: '',
				size: 150,
				codeImg: "",
				colorDark: '#000000',
				colorLight: '#ffffff',
				list: [],
				canvasHeight: 0,
				canvasWidth: 0,
				loading: false,
				username: ''
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.$t('home.name28')
			})
		},
		async onLoad(Option) {
			this.text = Option.text
			this.$fun.ajax.post('user/getH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.username = res.data.username
				}
			})
			const res = await this.$fun.ajax.post('config/invitation', {})
			if (res.code == 1) {
				let data = []
				res.data.forEach((item) => {
					data.push(this.$fun.imgUrl(item.image))
				})
				this.imgbox = data
				this.list = res.data
			}
			this.$nextTick(() => {
				this.drawImage()
			})
			// // #ifdef MP-WEIXIN
			// this.getaccesstoken()
			// // #endif
		},
		methods: {
			// 绘制二维码  H5
			getQrPath(tempFilePath) {
				var that = this;
				that.canvasQrPath = tempFilePath
				that.drawImage()
			},
			// 保存图片
			saveImgToLocal(index) {
				let that = this
				// #ifdef APP-PLUS
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: (res) => {
						if (res.confirm) {
							uni.canvasToTempFilePath({
								canvasId: `firstCanvas${index}`,
								success: function(res1) {
									uni.saveImageToPhotosAlbum({
										filePath: res1
											.tempFilePath,
										success: function() {
											uni.showToast({
												title: "保存成功",
												icon: "none"
											});
										},
										fail: function() {
											uni.showToast({
												title: "保存失败",
												icon: "none"
											});
										}
									});

								}
							}, this)
						} else if (res.cancel) {

						}
					}
				});
				// #endif
			},
			// 画图
			drawImage() {
				var that = this;
				this.loading = true
				for (let i = 0; i < this.imgbox.length; i++) {
					let ratio = uni.getSystemInfoSync().windowWidth / 375
					let widthratio = 375 / this.list[i].bg_width
					let heightratio = uni.getSystemInfoSync().windowHeight / this.list[i].bg_height
					that.canvasHeight = this.list[i].bg_height * heightratio
					that.canvasWidth = this.list[i].bg_width * widthratio * ratio
					uni.getImageInfo({
						src: this.imgbox[i],
						success(res) {
							let ctx = uni.createCanvasContext(`firstCanvas${i}`) // 使用画布创建上下文 图片
							ctx.drawImage(res.path, 0, 0, that.canvasWidth,
								that.canvasHeight) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							ctx.drawImage(res.path, 0, 0, that.canvasWidth,
								that.canvasHeight) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// x y
							let x = that.canvasWidth * (that.list[i].x_axis_bl);
							let y = that.canvasHeight * (that.list[i].y_axis_bl);
							let x1 = x - 5;
							let y1 = that.canvasHeight * (that.list[i].y_axis_bl);
							// 起始点
							ctx.moveTo(x, y)
							// 02 划线  坐标
							ctx.lineTo(x1, y1)
							ctx.lineTo(that.list[i].qr_width* widthratio, y1)
							ctx.lineTo(that.list[i].qr_height* heightratio , y)
							ctx.lineTo(x1, y)
							// 以上两行代码只是一个路径，但还没有绘制
							// 03 绘制
							ctx.fillStyle = "#FFFFFF"
							ctx.fill();

							// #ifdef MP-WEIXIN
							ctx.drawImage(that.codeImg, that.canvasWidth * (that.list[i].x_axis_bl),
								that.list[i]
								.bg_height * (that.list[i].y_axis_bl), that.list[i].qr_width,
								that.list[i].qr_height
							) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// #endif
							// #ifdef H5 || APP-PLUS
							ctx.drawImage(that.canvasQrPath, that.canvasWidth * (that.list[i]
									.x_axis_bl) , that
								.canvasHeight * (that.list[i].y_axis_bl), that.list[i].qr_width * widthratio *
								ratio,
								that.list[i].qr_height * heightratio
							) // 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
							// #endif
							// 设置文本样式
							ctx.font = "bold 14px Arial";
							ctx.fillStyle = "#fff"; // 白色
							if(that.username!=''){
								// 将文本写入Canvas
								// ctx.fillText('smartbox', that.canvasWidth / 2.4,that.canvasHeight * (that.list[i].y_axis_bl)*0.91);
								// ctx.fillText('推荐使用浏览器扫码', that.canvasWidth / 3,that.canvasHeight * (that.list[i].y_axis_bl)*1.851);
							}
							ctx.save(); //保存
							ctx.draw() //绘制
						},
						complete() {
							that.loading = false
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #3e3e3e;
	}
	.img_box {
		position: fixed;
		bottom: 50rpx;
		width: 80%;
		display: flex;
		justify-content: space-around;
		z-index: 100;
		left: 0;
		right: 0;
		margin: auto;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.swiper-3d {
		padding: 0upx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;

		.s-container {
			height: 900upx;
			width: 100%;

			.swiper-item {
				// max-width: 630upx;
				height: 90%;
				padding: 0upx 20upx;
				box-sizing: border-box;
				position: relative;

			}

			.item-img {
				// position: absolute;
				margin-top: 30upx;
				width: 100%;
				height: 80%;
				// border-radius: 15upx;
				z-index: 5;
				// opacity: 0.7;
				// top: 7%;
				// transform: translateY(-50%);
				// box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24);
			}

			.active {
				opacity: 1;
				z-index: 10;
				height: 90%;
				top: -3%;
				transition: all .1s ease-in 0s;
				transform: translateY(0);
			}
		}

		.swiper-dot {
			display: flex;
			justify-content: center;
			align-items: center;

			// padding-top: 10upx;
			.dot {
				margin: 0 10upx;
				width: 15upx;
				height: 15upx;
				border-radius: 50%;
				background: #bbb;

				&.on {
					background: #FF5534;
				}
			}
		}
	}
</style>